// 路由组件
// 先引入公用的依赖
import React, { Component, Suspense } from 'react'
// Suspense:悬念 fallback 后备

// 路由组件
import { Switch, Route, Redirect, withRouter } from 'react-router-dom'

// 要展示的自己的组件
// import ComA from '../components/ComA'
// import ComBig from '../components/ComBig'
// import Fetch from '../components/Fetch'
// import Fome from '../components/Fome'
// import NotFound from '../components/NotFound'
// import Index1 from '../components/Index'
// import Arg from '../components/Arg'
// import XjjList from '../components/XjjList'
// import Detail from '../components/Detail'
// import Layout from '../components/Layout'
// import Login from '../components/Login'

// 改为懒加载的方式
const ComA = React.lazy(() => import('../components/ComA'))
const ComBig = React.lazy(() => import('../components/ComBig'))
const Fetch = React.lazy(() => import('../components/Fetch'))
const Fome = React.lazy(() => import('../components/Fome'))
const Index1 = React.lazy(() => import('../components/Index'))
const NotFound = React.lazy(() => import('../components/NotFound'))
const Arg = React.lazy(() => import('../components/Arg'))
const XjjList = React.lazy(() => import('../components/XjjList'))
const Detail = React.lazy(() => import('../components/Detail'))
const Layout = React.lazy(() => import('../components/Layout'))
const Login = React.lazy(() => import('../components/Login'))
const Antd = React.lazy(() => import('../components/Antd'))
const Redux = React.lazy(() => import('../components/Redux'))

export default class Index extends Component {
  constructor() {
    super();
    this.state = {
      // 路由表
      routes: [
        { path: '/layout', component: Layout, needLogin: true, title: '嵌套路由' },
        { path: '/xjjlist', component: XjjList, needLogin: true, title: '小姐姐列表' },
        { path: '/detail/:id', component: Detail, needLogin: true, title: '歌曲详情' },
        { path: '/login', component: Login, needLogin: false, title: 'Login' },
        { path: '/antd', component: Antd, needLogin: false, title: 'Antd' }
      ]
    }
  }
  render() {
    return (
      <>
        <Suspense fallback={<mark>loading...</mark>}>
          <Switch>
            <Route path="/" exact render={() => {
              document.title = "首页"
              return <Index1></Index1>
            }}></Route>
            <Route path="/redux" component={Redux}></Route>
            <Route path="/coma" component={ComA}></Route>
            <Route path="/antd" component={Antd}></Route>
            <Route path="/combig" component={ComBig}></Route>
            <Route path="/fetch" component={Fetch}></Route>
            <Route path="/fome" component={Fome}></Route>
            <Route path="/arg" component={Arg}></Route>
            <Route path="/404" component={NotFound}></Route>
            {/* Redirect 重定向 to表示修改后的地址 */}
            <Redirect to="/404"></Redirect>
          </Switch>
        </Suspense>
      </>
    )
  }
}
